<template>
  <div>
    <ListContainer ref="ProvinceList"
                   resource-uri="address/region"
                   resource-name="region"
                   :params="regionData.province.params"
                   v-on:fetched="onProvinceListFetched"
                   v-show="false">
    </ListContainer>
    <ListContainer ref="CityList"
                   resource-uri="address/region"
                   resource-name="region"
                   :params="regionData.city.params"
                   v-on:fetched="onCityListFetched"
                   v-show="false">
    </ListContainer>
    <ListContainer ref="DistrictList"
                   resource-uri="address/region"
                   resource-name="region"
                   :params="regionData.district.params"
                   v-on:fetched="onDistrictListFetched"
                   v-show="false">
    </ListContainer>

    <el-select v-model="regionValue.province" @change="onProvinceValueChange" placeholder="请选择省份" size="small" :disabled="disabled">
      <el-option
        v-for="item in regionData.province.regions"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="regionValue.city" @change="onCityValueChange" placeholder="请选择城市" size="small" :disabled="disabled">
      <el-option
        v-for="item in regionData.city.regions"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <el-select v-model="regionValue.district" @change="onDistrictValueChange" placeholder="请选择辖区" size="small" :disabled="disabled">
      <el-option
        v-for="item in regionData.district.regions"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>

  </div>
</template>

<script>
  import ListContainer from '../ListContainer.vue'

  export default {
    data () {
      return {
        regionValue: {
          province: null,
          city: null,
          district: null
        },
        reset: true,
        regionData: {
          province: {
            params: {
              type: 'province'
            },
            regions: []
          },
          city: {
            params: {
              type: 'city',
              region_id: null
            },
            regions: []
          },
          district: {
            params: {
              type: 'district',
              region_id: null
            },
            regions: []
          }
        }
      }
    },
    props: {
      disabled: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onProvinceListFetched (data) {
        this.regionData.province.regions = data
      },
      onCityListFetched (data) {
        this.regionData.city.regions = data
      },
      onDistrictListFetched (data) {
        this.regionData.district.regions = data
      },
      onProvinceValueChange (value) {
        console.log(value)
        this.regionData.city.params = {
          type: 'city',
          region_id: value
        }
        this.$emit('provinceChanged', value)
        if (this.reset) {
          this.regionData.city.regions = []
          this.regionValue.city = null
        }
      },
      onCityValueChange (value) {
        console.log(value)
        this.regionData.district.params = {
          type: 'district',
          region_id: value
        }
        this.$emit('cityChanged', value)
        if (this.reset) {
          this.regionData.district.regions = []
          this.regionValue.district = null
        }
      },
      onDistrictValueChange (value) {
        console.log(value)
        this.$emit('districtChanged', value)
      }
    },
    components: {
      ListContainer
    }
  }
</script>
